<template>
  <div :style="{width:'100%',height:'100%'}" ref="homeEch"></div>
</template>

<script>
export default {
  name: "Age",
  data() {
    return {
      data: [],
      agelist: [{}]
    };
  },
  created() {
    // this.echarts();
  },
  mounted() {
    this.echarts();
    this.resizefun = () => {
      this.$echarts.init(this.$refs.homeEch).resize();
    };
    window.addEventListener("resize", this.resizefun);
  },
  //移除事件监听，避免内存泄漏
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
  methods: {
    // 年龄比例接口
    echarts() {
    //   let that = this;
      let myChart = this.$echarts.init(this.$refs.homeEch);
        let json = '{"code":0,"data":{"title":"下班考勤","subtitle":"总览","names":["早退","正常"],"list":[{"name":"考勤","value":[88,1644]}]}}'
        let obj = JSON.parse(json)
        let data = obj.data
        var option = {
            tooltip: {
                trigger: 'axis',
              
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: '考勤人数',
                textStyle:{
                    color:'#fff'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: false,
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',

                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    splitLine: {
                        show: false
                    },
                    data:data.names,
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff',

                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }

                }
            ],
            series: [
                {
                    name: '人数',
                    type: 'bar',
                    data: data.list[0].value,
                    itemStyle: {
                        normal: {
                            color: "#1afffd"
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>